<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="js/bootstrap-3.3.7-dist/css/bootstrap.css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
<!--头部-->
<header class="publicHeader">
    <h1>超市账单管理系统</h1>

    <div class="publicHeaderR">
        <p><span>下午好！</span><span style="color: #fff21b"> Admin</span> , 欢迎你！</p>
        <a href="login.html">退出</a>
    </div>
</header>
<!--时间-->
<section class="publicTime">
    <span id="time">2015年1月1日 11:11  星期一</span>
    <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
</section>
<!--主体内容-->
<section class="publicMian ">
    <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
        <nav>
            <ul class="list">
                <li><a href="billList.html">账单管理</a></li>
                <li id="active"><a href="providerList.html">供应商管理</a></li>
                <li><a href="userList.html">用户管理</a></li>
                <li><a href="password.html">密码修改</a></li>
                <li><a href="login.html">退出系统</a></li>
            </ul>
        </nav>
    </div>
    <!--vue挂载的dom元素为class=“right”，取一个id="app"-->
    <div class="right" id="app">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>供应商管理页面</span>
        </div>
        <div class="search">
            <span>供应商名称：</span>
            <input type="text" placeholder="请输入供应商的名称"/>
            <input type="button" value="查询"/>
            <a href="#" @click="open()">添加供应商</a>
        </div>
        <!--供应商操作表格-->
        <table class="providerTable" cellpadding="0" cellspacing="0">
            <tr class="firstTr">
                <th width="10%">供应商编码</th>
                <th width="20%">供应商名称</th>
                <th width="10%">联系人</th>
                <th width="10%">联系电话</th>
                <th width="10%">传真</th>
                <th width="10%">创建时间</th>
                <th width="30%">操作</th>
            </tr>
            <tr v-for="obj,key in proList">
                <td>{{obj.proCode}}</td>
                <td>{{obj.proName}}</td>
                <td>{{obj.proContact}}</td>
                <td>{{obj.proPhone}}</td>
                <td>{{obj.proFax}}</td>
                <td>{{obj.creationDate}}</td>
                <td>
                    <a href="#" @click.prevent="findProById(obj.id,1)"><img src="img/read.png" alt="查看" title="查看"/></a>
                    <a href="#" @click.prevent="findProById(obj.id,2)"><img src="img/xiugai.png" alt="修改" title="修改"/></a>
                    <a href="#" @click.prevent="del(obj.id,key)" class="removeProvider"><img src="img/schu.png" alt="删除" title="删除"/></a>
                </td>
            </tr>

        </table>

        <!-- Modal.1.start -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <div class="providerAdd">
                            <form action="#">
                                <!--div的class 为error是验证错误，ok是验证成功-->
                                <div class="">
                                    <label for="providerId">供应商编码：</label>
                                    <input type="text" v-model="pro.proCode" name="providerId" id="providerId"/>
                                    <span>*</span>
                                </div>
                                <div>
                                    <label for="providerName">供应商名称：</label>
                                    <input type="text" v-model="pro.proName" name="providerName" id="providerName"/>
                                    <span >*</span>
                                </div>
                                <div>
                                    <label for="people">联系人：</label>
                                    <input type="text" v-model="pro.proContact" name="people" id="people"/>
                                    <span>*</span>

                                </div>
                                <div>
                                    <label for="phone">联系电话：</label>
                                    <input type="text" v-model="pro.proPhone" name="phone" id="phone"/>
                                    <span></span>
                                </div>
                                <div>
                                    <label for="address">联系地址：</label>
                                    <input type="text" v-model="pro.proAddress" name="address" id="address"/>
                                    <span></span>

                                </div>
                                <div>
                                    <label for="fax">传真：</label>
                                    <input type="text" v-model="pro.proFax" name="fax" id="fax"/>
                                    <span></span>

                                </div>
                                <div>
                                    <label for="describe">描述：</label>
                                    <input type="text" v-model="pro.proDesc" name="describe" id="describe"/>
                                    <span></span>

                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" @click="updatePro()">保存</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" >返回</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal.1.end -->
        <!-- Modal.2.start -->
        <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="providerView">
                            <p><strong>供应商编码：</strong><span>{{pro.proCode}}</span></p>
                            <p><strong>供应商名称：</strong><span>{{pro.proName}}</span></p>
                            <p><strong>联系人：</strong><span>{{pro.proContact}}</span></p>
                            <p><strong>联系电话：</strong><span>{{pro.proPhone}}</span></p>
                            <p><strong>传真：</strong><span>{{pro.proFax}}</span></p>
                            <p><strong>描述：</strong><span>{{pro.proDesc}}</span></p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal" >返回</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal.2.end -->

    </div>
</section>


<footer class="footer">
    版权归北大青鸟
</footer>

<script src="js/time.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            proList:[],//存储供应商的集合
            pro:{},     //存储单个供应商
            op:0,
        },
        methods:{
            //方法一、读取全部的供应商
            findAll:function () {
                var _this = this;
                //发送axios
                axios.get("/providerList.do")
                .then(function (response) {
                    console.log(response.data);
                    _this.proList=response.data;
                })
                .catch(function (error) {
                    console.log(error)
                })
            },
            //方法二、删除供应商
            del:function (proId,index) {
                var _this = this;
                if (confirm("确认要删除吗？")){
                    axios.get("/providerDelete.do",{
                        params:{
                            id:proId
                        }
                    })
                    .then(function (response) {
                        if (response){
                            _this.proList.splice(index,1)
                        }else {
                            alert("删除失败")
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
                }
            },
            //方法三、根据id查询供应商
            findProById:function (proId,key) {
                var _this = this;
                    axios.get("/providerUpdateView.do",{
                        params:{
                            id:proId
                        }
                    })
                        .then(function (response) {
                            console.log(response);
                            _this.pro=response.data
                        })
                        .catch(function (error) {
                            console.log(error)
                        })
                //打开模态框
                if (key==1){
                    $('#viewModal').modal('show')
                }else if (key==2){
                    _this.op=0;
                    $('#myModal').modal('show')
                }
            },
            //方法四、修改供应商
            updatePro:function () {
                var _this=this;
                if (_this.op==0){
                    axios.post("/providerUpdate.do",_this.pro)
                        .then(function (response) {
                            if (response){
                                _this.findAll()
                            }else {
                                alert("更改错误")
                            }
                        })
                        .catch(function (error) {
                            console.log(error)
                        })
                }else if (_this.op==1){
                    axios.put("/providerAdd.do",_this.pro)
                        .then(function (response) {
                            if (response){
                                _this.findAll()
                            }else {
                                alert("添加 失败")
                            }
                        })
                        .catch(function (error) {
                            console.log(error)
                        })
                }
            },
            //方法四、增加
            open:function (){
                this.pro={};
                this.op=1;
                $('#myModal').modal('show')
            },
        },
        created:function () {
            this.findAll();
        }
    })

</script>

</body>
</html>